$(function () {

  // http://124.223.14.236:8060/admin

  localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMS0wOS0wOCAxOTo0MzowMyIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2NjY4NDIzMzF9.KYWxeh7pKbUAo817unFRpkdrzLWqvw08H_HCfSMF1DI')
  // const xhr = new XMLHttpRequest()
  // xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
  // xhr.setRequestHeader('x-token', localStorage.getItem('token'))
  // xhr.send()
  // xhr.onreadystatechange = function () {
  //   if (xhr.readyState === 4 && xhr.status === 200) {
  //     // console.log(JSON.parse(xhr.responseText));
  //     const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
  //       return `
  //     <div class="xr">
  //     <div class="xr_one">${i}</div>
  //     <div class="xr_id"  >${item.id}</div>
  //     <div class="xr_fl">${item.catename}</div>
  //     <div class="xr_tb">${item.icon}</div>
  //     <div class="xr_qz">${item.sort_num}</div>
  //     <div class="xr_cz">
  //       <div class="xr_left">
  //       <i class="iconfont icon-bianjisekuai"></i></div>
  //       <div class="xr_right">
  //       <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
  //       </div>
  //     </div>
  //     </div>
  //     `

  //     }).join('')

  //     document.querySelector('.xr_max ').innerHTML = two
  //   }
  // }

  // console.log(localStorage.getItem('token'));

  document.querySelector('.ssk').addEventListener('click', function () {
    console.log(12);
    const id = document.querySelector('.layui-input').value
    console.log(id);
    const xhr1 = new XMLHttpRequest()
    xhr1.open('get', `http://124.223.14.236:8060/admin/ydd_cate/rowInfo?id=${id}`)
    xhr1.setRequestHeader('x-token', localStorage.getItem('token'))
    xhr1.send()
    xhr1.onreadystatechange = () => {
      if (xhr1.readyState === 4 && xhr1.status === 200) {
        const { catename, default_data, icon, id, sort_num } = JSON.parse(xhr1.responseText).data
        // console.log(JSON.parse(xhr1.responseText).data);
        document.querySelector('.xr_max ').innerHTML = `
      <div class="xr">
      <div class="xr_one">${default_data}</div>
      <div class="xr_id">${id}</div>
      <div class="xr_fl">${catename}</div>
      <div class="xr_tb">${icon}</div>
      <div class="xr_qz">${sort_num}</div>
      <div class="xr_cz">
        <div class="xr_left">
        <i class="iconfont icon-bianjisekuai"></i></div>
        <div class="xr_right">
        <a class="iconfont icon-lajitong"></a>
        </div>
      </div>
      </div>
      `
      }
    }
  })

  document.querySelector('.skk').addEventListener('click', function () {

    const xhr = new XMLHttpRequest()
    xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
    xhr.setRequestHeader('x-token', localStorage.getItem('token'))
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // console.log(JSON.parse(xhr.responseText));
        const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
          return `
      <div class="xr">
      <div class="xr_one">${i}</div>
      <div class="xr_id">${item.id}</div>
      <div class="xr_fl">${item.catename}</div>
      <div class="xr_tb">${item.icon}</div>
      <div class="xr_qz">${item.sort_num}</div>
      <div class="xr_cz">
        <div class="xr_left">
        <i class="iconfont icon-bianjisekuai"></i>
        </div>
        <div class="xr_right">
        <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
        </div>
      </div>
      </div>
      `

        }).join('')

        document.querySelector('.xr_max ').innerHTML = two
      }
    }

  })


  //******************************** */


  document.querySelector('.bg').addEventListener('click', function (e) {







    // console.log(12);
    if (e.target.tagName === `A`) {
      const shanchu = e.target.dataset.id
      // console.log(shanchu);


      const xhr5 = new XMLHttpRequest()
      xhr5.open('GET', `http://124.223.14.236:8060/admin/ydd_cate/del?id=${shanchu}`)
      xhr5.setRequestHeader('x-token', localStorage.getItem('token'))
      xhr5.send()
      xhr5.onreadystatechange = () => {
        if (xhr5.readyState === 4 && xhr5.status === 200) {
          console.log(JSON.parse(xhr5.responseText));
          if (JSON.parse(xhr5.responseText).errno === 1000) {
            return layer.msg(JSON.parse(xhr5.responseText).errmsg);


          }

          const xhr = new XMLHttpRequest()
          xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
          xhr.setRequestHeader('x-token', localStorage.getItem('token'))
          xhr.send()
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              // console.log(JSON.parse(xhr.responseText));
              const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
                return `
          <div class="xr">
          <div class="xr_one">${i}</div>
          <div class="xr_id"  >${item.id}</div>
          <div class="xr_fl">${item.catename}</div>
          <div class="xr_tb">${item.icon}</div>
          <div class="xr_qz">${item.sort_num}</div>
          <div class="xr_cz">
            <div class="xr_left">
            <i class="iconfont icon-bianjisekuai"></i></div>
            <div class="xr_right">
            <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
            </div>
          </div>
          </div>
          `

              }).join('')

              document.querySelector('.xr_max ').innerHTML = two
              layer.msg('删除成功');

            }
          }
        }

      }



    }


  })



  document.querySelector('body').addEventListener('click', function (e) {
    // console.log(e.target.classList);
    if (e.target.classList[1] === 'an1') {

      // console.log(+);
      const num = document.querySelector('.ga').value
      document.querySelector('.ga').value = +num + 1



    }

  })


  document.querySelector('body').addEventListener('click', function (e) {
    // console.log(e.target.classList);
    if (e.target.classList[1] === 'an2') {
      console.log(123);
      // console.log(+);
      const num = document.querySelector('.ga').value
      document.querySelector('.ga').value = +num - 1

    }

  })




  document.querySelector('body').addEventListener('click', function (e) {
    // console.log(e.target.classList);




    if (e.target.classList[1] === 'an3') {
      const sort_num = +document.querySelector('.ga').value
      const catename = document.querySelector('.yck').value
      const icon = document.querySelector('#gg').value
      console.log(sort_num, catename, icon);
      const data = {
        sort_num: +sort_num, catename: catename, icon: icon

      }
      // console.log(data);

      // http://124.223.14.236:8060/admin/ydd_cate/add
      const xhr6 = new XMLHttpRequest()
      xhr6.open('post', 'http://124.223.14.236:8060/admin/ydd_cate/add')

      xhr6.setRequestHeader('x-token', localStorage.getItem('token'))
      xhr6.setRequestHeader('Content-Type', 'application/json; charset=utf-8')

      // console.log(data);
      xhr6.send(JSON.stringify(data))

      xhr6.onreadystatechange = () => {
        if (xhr6.readyState === 4 && xhr6.status) {
          console.log(JSON.parse(xhr6.responseText));
          // alert('')  
          layer.msg('添加成功');
        }


        const xhr = new XMLHttpRequest()
        xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
        xhr.setRequestHeader('x-token', localStorage.getItem('token'))
        xhr.send()
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {

            // console.log(JSON.parse(xhr.responseText));
            const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
              return `
          <div class="xr">
          <div class="xr_one">${i}</div>
          <div class="xr_id"  >${item.id}</div>
          <div class="xr_fl">${item.catename}</div>
          <div class="xr_tb">${item.icon}</div>
          <div class="xr_qz">${item.sort_num}</div>
          <div class="xr_cz">
            <div class="xr_left">
            <i class="iconfont icon-bianjisekuai"></i></div>
            <div class="xr_right">
            <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
            </div>
          </div>
          </div>
      `

            }).join('')

            document.querySelector('.xr_max ').innerHTML = two

          }


        }

      }
    }

  })












  $('tbody').on('click', '', function () {
    addBtnClose = layer.open({
      title: '添加分类',
      type: 1,
      area: ['800px', '350px'],
      content: $('#addTplDate').html(),
    });
    var id = {
      id: $(this).attr('data-id'),
    };

    axios({
      method: 'GET',
      url: 'http://124.223.14.236:8060/admin/ydd_cate/rowInfo',
      params: {
        id: id.id,
      },
      headers: {
        'x-token': localStorage.getItem('x-token'),
      },
    }).then(function (res) {
      console.log('id=========' + JSON.stringify(id));
      console.log('res.data======' + JSON.stringify(res));
      form.val('addFormDate', res.data.data);
    });
  });


  // 分页
  var laypage = layui.laypage;

  function render(data) {
    const two = data.map(function (item, i) {
      return `
    <div class="xr">
    <div class="xr_one">${i}</div>
    <div class="xr_id"  >${item.id}</div>
    <div class="xr_fl">${item.catename}</div>
    <div class="xr_tb">${item.icon}</div>
    <div class="xr_qz">${item.sort_num}</div>
    <div class="xr_cz">
      <div class="xr_left">
      <i class="iconfont icon-bianjisekuai" data-catename=${item.catename} data-id=${item.id} data-icon=${item.icon} data-sort_num=${item.sort_num} ></i></div>
      <div class="xr_right">
      <a class="iconfont icon-lajitong"data-id=${item.id}></a>
      </div>
    </div>
    </div>
    `
    }).join('')

    document.querySelector('.xr_max ').innerHTML = two
  }

  var q = {
    page: '1', // 页码值，默认请求第一页的数据
    limit: '10', // 每页显示几条数据，默认每页显示2条
    catename: ''
  }
  initTable()

  function initTable() {
    $.ajax({
      method: 'GET',
      url: 'http://124.223.14.236:8060/admin/ydd_cate/list',
      data: q,
      headers: {
        'x-token': localStorage.getItem('token') || ''
      },
      success: function (res) {
        console.log(res);
        renderPage(res.data.count)
        render(res.data.data)
      }
    })
  }

  // 定义渲染分页的方法
  function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.limit, // 每页显示几条数据
      curr: q.page, // 设置默认被选中的分页
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [10, 20, 40, 50, 100],// 每页展示多少条
      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调

      jump: function (obj, first) {
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的
        // console.log(first)
        // console.log(obj.curr)
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.page = obj.curr  // obj.curr是layui内置的 点击能获取第几页 点击下一页也能获取
        q.limit = obj.limit  // obj.limit  每页展示多少条
        // 根据最新的 q 获取对应的数据列表，并渲染表格
        // initTable()
        if (!first) {
          initTable()
        }
      }
    })
  }












  //********************** */







  // document.querySelector('.banner').addEventListener('click', function (e) {
  //   // console.log(e.target.classList);
  //   // if (e.target.classList[1] === "icon-bianjisekuai") {
  //   //   const sort_num = +document.querySelector('.geeee').value
  //   //   const catename = document.querySelector('.ycl').value
  //   //   const icon = document.querySelector('#gggg').value
  //   //   const id = document.querySelector('')
  //   //   console.log(sort_num, catename, icon);
  //   //   const data = {
  //   //     sort_num: +sort_num, catename: catename, icon: icon

  //   //   }
  //   //   console.log(data);

  //   //   // http://124.223.14.236:8060/admin/ydd_cate/add
  //   //   const xhr7 = new XMLHttpRequest()
  //   //   xhr7.open('post', 'http://124.223.14.236:8060/admin/ydd_cate/update')

  //   //   xhr7.setRequestHeader('x-token', localStorage.getItem('token'))
  //   //   xhr7.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
  //   //   console.log(data);
  //   //   xhr7.send(JSON.stringify(data))
  //   //   xhr7.onreadystatechange = () => {
  //   //     if (xhr7.readyState === 4 && xhr7.status) {
  //   //       console.log(JSON.parse(xhr7.responseText));
  //   //       // alert('添加成功')  
  //   //     }
  //   //     const xhr = new XMLHttpRequest()
  //   //     xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
  //   //     xhr.setRequestHeader('x-token', localStorage.getItem('token'))
  //   //     xhr.send()
  //   //     xhr.onreadystatechange = function () {
  //   //       if (xhr.readyState === 4 && xhr.status === 200) {

  //   //         // console.log(JSON.parse(xhr.responseText));
  //   //         const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
  //   //           return `
  //   //         <div class="xr">
  //   //         <div class="xr_one">${i}</div>
  //   //         <div class="xr_id"  >${item.id}</div>
  //   //         <div class="xr_fl">${item.catename}</div>
  //   //         <div class="xr_tb">${item.icon}</div>
  //   //         <div class="xr_qz">${item.sort_num}</div>
  //   //         <div class="xr_cz">
  //   //           <div class="xr_left">
  //   //           <i class="iconfont icon-bianjisekuai"></i></div>
  //   //           <div class="xr_right">
  //   //           <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
  //   //           </div>
  //   //         </div>
  //   //         </div>
  //   //     `

  //   //         }).join('')

  //   //         document.querySelector('.xr_max ').innerHTML = two

  //   //       }


  //   //     }

  //   //   }
  //   // }

  // })





})